<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9-清除炸弹定时器</title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background:red;
				border-radius:50%;
				margin:30px auto;
			}
			button{
				display:block;
				width:70px;
				height:30px;
				margin: 0 auto;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>清除</button>
		<script type="text/javascript">
			//setTimeout(function(){},1000);
			//设置一个炸弹定时器（特点：只执行一次）
			var timer = setTimeout(setBg,5000);
			
			//设置颜色
			function setBg(){
				document.querySelector('div').style.background='#000';
			}
			
			//点击按钮之后清除炸弹定时器
			document.querySelector('button').onclick=function(){
				console.log('清除了...');
				clearTimeout(timer);
			}
		</script>
	</body>
</html>
